<template>
	<!-- 统计报表-新契约效率报表页面 -->
	<div class="fillcontain">
		<!-- 标题 -->
		<div class="fastQuery">
			<el-row>
				<el-col :span="6" class="fastQuery_title">
					<i class="el-icon-tickets"></i><span>新契约效率报表</span></el-col>
				<el-col :span="8"></el-col>
			</el-row>
		</div>
		<el-form :model="searchParams" ref="ruleForm" label-width="100px" class="search_container">
			<el-row>
				<el-col :span="1">&nbsp;</el-col>
				<el-col :span="4">
					<el-radio-group @change="change" v-model="radioDate" columns="2">
						<el-radio-button label="日">日报</el-radio-button>
						<el-radio-button label="月">月报</el-radio-button>
					</el-radio-group>
				</el-col>
				<el-col :span="6">
					<el-form-item  :label="selectToday" >
					<el-radio-group @change="changeToday" v-model="isToday" columns="2">
						<el-radio-button label="1" selected>是</el-radio-button>
						<el-radio-button label="0">否</el-radio-button>
					</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="选择日期" v-if="radioDate =='日'">
						<el-date-picker :disabled="isToday=='1'" @change="getTime" :picker-options="datePicker" v-model="time" type="daterange" format="yyyy-MM-dd"
						 value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="选择日期" v-if="radioDate =='月'">
						<el-date-picker  :disabled="isToday=='1'"  @change="getTime" :picker-options="datePicker" v-model="time" type="monthrange" format="yyyy-MM"
						 value-format="yyyy-MM" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="4" class="text_center">
					<el-button type="primary" icon="el-icon-search" @click="search"></el-button>
					<el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
				</el-col>
			</el-row>
		</el-form>
		<!-- excel 导出 无法设置header-->
		<!-- 		<form  action=""  target="formTarget" method="post" id="formsubmit" style="display: none;">
			<input type="hidden" id="allData" value="" name="allData">
		</form>
		<iframe id="formTarget" name="formTarget" frameborder="0" style="display: none;"></iframe>
		 -->
		<div class="contain">
			<!-- 操作按钮 -->
			<el-row class="bgfff pb20">
				<el-col :span="24">
					<el-button type="danger" plain @click="exportExcel">导出</el-button>
				</el-col>
			</el-row>
			<div class="table_container">
				<el-table ref="tableRef" v-loading="loading" :data="tableData" highlight-current-row header-cell-class-name="table-header-class"
				 style="width:100%">
					<el-table-column min-width="130" property="CUSTOMERNO" label="工号" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="130" property="NAME" label="姓名" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="130" property="allCount" label="工作量" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="150" property="oneRatio" label="工作效率(工作日)" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="任务明细" align='center' show-overflow-tooltip>
						<el-table-column min-width="100" prop="nbCount" label="新单核保" align='center' show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="100" prop="bqCount" label="保全核保" align='center' show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="100" prop="lpCount" label="理赔二核" align='center' show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="100" prop="xqCount" label="续期核保" align='center' show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="100" prop="zbCount" label="再保处理" align='center' show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="100" prop="cbCount" label="承保后调查" align='center' show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="100" prop="yhbCount" label="预核保" align='center' show-overflow-tooltip>
						</el-table-column>
					</el-table-column>
					<el-table-column min-width="120" :label="title" align='center' :show-overflow-tooltip="true">
						<template v-for="(col ,index) in cols">
							<el-table-column min-width="170" :prop="col.prop" :label="col.label" align='center' show-overflow-tooltip>
							</el-table-column>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>
<script>
	import moment from 'moment';
	import TaskConstants, {
		call,
		exportData
	} from "@/api/taskManager/common"
	import constant from '@/utils/constant';
	export default {
		data() {
			return {
				emptySearchParams: {}, //空的查询
				loading: false,
				radioDate: '日',
				title: '',
				pickerMinDate:'',
				pickerMaxDate:'',
				now:new Date(),
				time: '', //初始日期
				isToday:'1',//是否统计当天，是1，否0
				selectToday:'是否当天',
				searchParams: {
					startTime: '',
					endTime: '',
					type: 'day',
					isToday:'1'
				},
				cols: [], //动态列
				tableData: [],
				datePicker: {
					// onPick: (obj) => {
					// 	this.pickerMaxDate = obj.maxDate;
					// 	this.pickerMinDate = obj.minDate;
					// },
					disabledDate: (time) => {
						/* 只能查询前一天的数据 */
						let currTime = moment().add(-1, 'days');
						return time.getTime() >= currTime.toDate().getTime();
					}
				},
			}
		},
		activated(){
		    document.onkeydown = (event)=>{
		        var e = event || window.event || arguments.callee.caller.arguments[0];
		        if (e && e.keyCode == 113) {
		            this.search();
		        }
		    };
		}, 
		mounted() {

		},
		created() {
			this.emptySearchParams = JSON.parse(JSON.stringify(this.searchParams));
			let now = moment().format("YYYY-MM-DD");
			this.time =[now,now];
			this.searchParams.startTime = now;
			this.searchParams.endTime = now;
		},
		methods: {
			show() {
				this.$store.dispatch('loading/CHANGE_LOADING', true);
			},
			cancle() {
				this.$store.dispatch('loading/CHANGE_LOADING', false)
			},
			getTime(arrayTime) {
				if(arrayTime ==null||""==arrayTime){
					this.searchParams.startTime = "";
					this.searchParams.endTime = "";
				} else{
					this.searchParams.startTime = arrayTime[0];
					this.searchParams.endTime = arrayTime[1];
				}

			},
			changeToday(value){
				let formatStr ;
				if (this.radioDate='日') {
					formatStr="YYYY-MM-DD";
				} else {
					formatStr="YYYY-MM";
				}
				if (value == '1') {
					this.searchParams.isToday='1';
					let now = moment().format(formatStr);
					this.searchParams.startTime = now;
					this.searchParams.endTime = now;
					this.time =[now,now];
				} else {
					this.searchParams.startTime = '';
					this.searchParams.endTime = '';
					this.time =['',''];
					this.searchParams.isToday='0';
				}
			},
			change(value) {
				let formatStr ;
				if (value == '日') {
					this.searchParams.type = 'day';
					formatStr="YYYY-MM-DD";
					this.selectToday ='是否当天';
				} else {
					this.searchParams.type = 'month';
					formatStr="YYYY-MM";
					this.selectToday ='是否当月';
				}
				let now = moment().format(formatStr);
				this.searchParams.startTime = now;
				this.searchParams.endTime = now;
				this.time =[now,now];
			},
			search() {
				this.tableData = [];
				this.cols = [];
				if(this.searchParams.startTime ==''||this.searchParams.startTime ==undefined||this.searchParams.startTime=='undefined'){
					this.$message.error("请选择时间！");
					return;
				}
				this.show();
				call(TaskConstants.apis.queryRatio, this.searchParams, "post").then(result => {
					if (result.resultCode == constant.SUCCESS && result.data) {
						let resData = result.data;
						this.tableData = resData.resData;
						this.title = this.searchParams.startTime + ' 到 ' + this.searchParams.endTime;
						for (let index in resData.allTime) {
							let time = resData.allTime[index];
							let item = {};
							item['prop'] = time
							let label = time;
							label = label.substring(5, label.length);
							item['label'] = label;
							this.cols.push(item);
						}
					}
					this.cancle();
				}).catch(err => {
					this.cancle();
				});
			},
			resetSearch() {
				this.searchParams = JSON.parse(JSON.stringify(this.emptySearchParams));
				this.time = '';
				
			},
			exportExcel() {
				let titleArrayAll = []; //总的title
				let titleFirst = []; //未合并表格的title
				let titleSecond = []; //8个pool
				let titleMager = []; //合并的title
				let data = this.$refs.tableRef.data; //table数据
				// if (undefined == data || data.length == 0) {
				// 	this.$message.error("请先查询数据！");
				// 	return;
				// }
				this.$refs.tableRef.columns.forEach(item => {
					let ite = {};
					ite[item.property] = item.label;
					if (item.level == 1) {
						titleFirst.push(ite);
					}
					if (item.level == 2) {
						titleSecond.push(ite);
					}
				});
				titleMager.push("任务明细");
				if (this.title != undefined || "" != this.title) {
					titleMager.push(this.title);
				}
				//excel的表标题
				titleArrayAll = [titleFirst, titleSecond];
				let param = {
					tableTitle: titleArrayAll,
					titleMager: titleMager,
					data: data,
					title: "新契约效率报表",
					type: this.searchParams.type,
					html: 'ratio',
					isToday:this.searchParams.isToday,
				}
				param = JSON.stringify(param);
				let vueObj = this;
				exportData(vueObj,TaskConstants.apis.exportRatio, {
					allData: param
				}, "post", "新契约效率报表.xls","application/vnd.ms-excel;charset=utf-8");
			}
		}
	}
</script>
<style lang="less" scoped>
	.fillcontain {
		padding-bottom: 0;

		.fastQuery {
			padding: 15px 20px 10px 20px;
			background: #fff;
			border-bottom: 1px solid #e1e1e1;

			.fastQuery_title {
				color: #666;
				padding: 6px 0px;
			}
		}
	}

	.contain {
		background: #fff;
		padding: 10px;
		margin-bottom: 20px;
	}
</style>
